<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>test-1</title>
<style>
* {
	padding: 0;
	margin: 0;
}
/*框架*/
	body {
	overflow: hidden;
}
.page-wrap {
	overflow:hidden
}
.page {
	display:none;
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0
}
.contain {
	width:100%;
	height:100%;
	display:none;
	position:relative;
	z-index:0
}
.current .contain,.slide .contain {
	display:block
}
.current {
	display:block;
	z-index:1
}
.slide {
	display:block;
	z-index:2
}
.swipe {
	display:block;
	z-index:3;
	transition-duration:0ms!important;
	-webkit-transition-duration:0ms!important
}
</style>
    
</head>
<body>
<div id="pageContain" class="page-wrap">
    
    <div class="page page1 current" style="background-color:#D45E60">
        <div class="contain">
	    	第一屏
        </div>
    </div>

    <div class="page page2" style="background-color:#CB93E4">
        <div class="contain">
            第二屏
        </div>
    </div>

    <div class="page page3" style="background-color:#74E7CC">
        <div class="contain">
            第三屏
        </div>
    </div>

    <div class="page page4" style="background-color:#93F08C">
        <div class="contain">
            第四屏
        </div>
    </div>
</div>

<script src="../js/fullPage.js"></script>
<script>

	//禁止窗口的默认滑动
	document.ontouchmove = function(e){
	    e.preventDefault();
	};
    

	//框架
	var runPage,
	    interval,
	    autoPlay;

	autoPlay = function(to) {

	    clearTimeout(interval);
	    interval = setTimeout(function() {
	        runPage.go(to);
	    }, 5000);

	}

	runPage = new FullPage({

	    id : 'pageContain',                            // id of contain
	    slideTime : 800,                               // time of slide
	    continuous : false,                             // create an infinite feel with no endpoints
	    effect : {                                     // slide effect
	        transform : {
	            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
	            scale : [1, 1],                       // [scalefrom, scaleto]
	            rotate : [0, 0]                       // [rotatefrom, rotateto]
	        },
	        opacity : [0, 1]                           // [opacityfrom, opacityto]
	    },                           
	    mode : 'wheel,touch',               // mode of fullpage
	    easing : 'ease',                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
	    // callback : function(index, thisPage) {

	    //     index = index + 1 > 3 ? 0 : index + 1;
	    //     autoPlay(index);
	    // }
	});

	// interval = setTimeout(function() {
	//     runPage.go(runPage.thisPage() + 1);
	// }, 5000);
    
    
</script>
</body>
</html>